// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';

// 视图插件
import {
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
  Tree,
  notification,
} from 'antd';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import AuthorityAdd from './AuthorityAdd';
import AuthorityDetail from './AuthorityDetail';
import AuthorityPermission from './AuthorityPermission';

// css OR less预编译器
import styles from './AuthorityList.less';

// 图片

/**
 *  Created by xjc on 2019/5/15
 *  Describe:数据连接
 */

@connect(({ authority, loading }) => ({
  authority,
  loading: loading.models.AuthorityRule,
}))
@Form.create()
class AuthorityList extends PureComponent {
  componentWillMount() {}

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    selectedRows: [], // 选择行
    formValues: {
      num: 10,
      page: 1,
    }, // 表格参数
    AuthorityAddVisible: false, // modal开关
    AuthorityDetailVisible: false, // modal开关
    AuthorityPermissionVisible: false, // modal开关
    EditORExamine: 'Edit', // 查看还是编辑
    record: {}, // 当前行内容
  };

  /**
   *  Describe:改变每页条数和当前页
   *  Created by xjc on 2019/6/17
   */

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetAuthorityList',
      payload: {
        num: pagination.pageSize,
        page: pagination.current,
      },
    });
  };

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:表头
   */
  columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '角色名称',
      dataIndex: 'role',
    },
    {
      title: '操作',
      render: (text, record) => (
        <Fragment>
          <span>
            <a onClick={this.AuthorityEdit.bind(this, record)}>编辑</a>
            <Divider type="vertical" />
            <a onClick={this.AuthorityDelete.bind(this, record)}>删除</a>
            <Divider type="vertical" />
            <a onClick={this.AuthoritydDistribute.bind(this, record)}>分配权限</a>
          </span>
        </Fragment>
      ),
    },
  ];

  /**
   *  Created by xjc on 2019/5/20
   *  Describe:编辑，删除，分配权限
   */

  AuthorityEdit(record) {
    this.setState({
      AuthorityDetailVisible: true,
      EditORExamine: 'Edit',
      record,
    });
  }

  AuthorityDelete(record) {
    const that = this;
    const key = `open${Date.now()}`;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          const { dispatch } = that.props;
          dispatch({
            type: 'authority/RemoveAuthorityList',
            payload: {
              id: record.id,
            },
            callback: res => {
              if (res.code === 1) {
                const { formValues } = that.state;
                /* 导入列表数据 */
                dispatch({
                  type: 'authority/GetAuthorityList',
                  payload: formValues,
                });
                message.success(res.message);
              } else {
                message.warning(res.message);
              }
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否置为不可用',
      btn,
      key,
      onClose: close,
    });
  }

  AuthoritydDistribute(record) {
    this.setState({
      AuthorityPermissionVisible: true,
      EditORExamine: 'Edit',
      record,
    });
  }

  closeAuthorityDetail() {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    this.setState({
      AuthorityDetailVisible: false,
    });
    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetAuthorityList',
      payload: formValues,
    });
  }

  closeAuthorityPermission() {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    this.setState({
      AuthorityPermissionVisible: false,
    });
    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetAuthorityList',
      payload: formValues,
    });
  }

  /**
   *  Created by xjc on 2019/5/21
   *  Describe:添加角色
   */
  addAuthority() {
    this.setState({
      AuthorityAddVisible: true,
      EditORExamine: 'Edit',
    });
  }

  closeAuthorityAdd() {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    this.setState({
      AuthorityAddVisible: false,
    });
    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetAuthorityList',
      payload: formValues,
    });
  }

  /**
   *  Created by xjc on 2019/5/15
   *  Describe:视图
   */

  render() {
    const {
      authority: { authorityData },
      loading,
    } = this.props;
    const {
      listLoading,
      selectedRows,
      AuthorityDetailVisible,
      AuthorityPermissionVisible,
      AuthorityAddVisible,
      record,
      EditORExamine,
    } = this.state;

    const listData = {
      list: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 1,
      },
    };
    if (authorityData.code === 1 && authorityData.list !== undefined) {
      listData.list = authorityData.list;
      listData.pagination = {
        current: authorityData.pagination.current,
        pageSize: authorityData.pagination.pageSize,
        total: authorityData.pagination.total,
      };
    }

    return (
      <PageHeaderWrapper title="角色管理">
        <Card bordered={false}>
          <Button type="primary" onClick={this.addAuthority.bind(this)}>
            添加角色
          </Button>
          <br />
          <br />
          <StandardTable
            selectedRows={selectedRows}
            loading={listLoading}
            data={listData}
            columns={this.columns}
            onChange={this.handleStandardTableChange}
            rowKey="id"
            scroll={{ x: 'auto' }}
          />
        </Card>
        {AuthorityAddVisible ? (
          <AuthorityAdd
            EditORExamine={EditORExamine}
            closeAuthorityAdd={this.closeAuthorityAdd.bind(this)}
          />
        ) : null}
        {AuthorityDetailVisible ? (
          <AuthorityDetail
            EditORExamine={EditORExamine}
            record={record}
            closeAuthorityDetail={this.closeAuthorityDetail.bind(this)}
          />
        ) : null}
        {AuthorityPermissionVisible ? (
          <AuthorityPermission
            record={record}
            closeAuthorityPermission={this.closeAuthorityPermission.bind(this)}
          />
        ) : null}
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    /* 导入列表数据 */
    dispatch({
      type: 'authority/GetAuthorityList',
      payload: formValues,
    });
  }

  componentWillUnmount() {}
}

export default AuthorityList;
